import React, { useMemo } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import TextAtom from "../../Atoms/Text.Atom";
import TextAtomEnum from "../../Atoms/Text.Atom/enum";
import { useTranslation } from "react-i18next";

interface AdminMenuItems {
  title: string;
  link: string;
}

const AdminMenu = () => {
  const { t } = useTranslation();

  // Кэшируем массив adminMenuItems с помощью useMemo
  const adminMenuItems = useMemo(() => {
    return t("AdminPage.menu", { returnObjects: true }) as AdminMenuItems[];
  }, [t]);

  const router = useRouter();

  const isActive = (href: string) => {
    return router.pathname === href ? "font-extrabold" : "";
  };

  return (
    <div className="flex flex-col gap-4">
      {adminMenuItems.map((e, index) => (
        <Link href={e.link} key={index}>
          <TextAtom
            type={TextAtomEnum.enum_h5}
            className={`uppercase ${isActive(e.link)}`}
          >
            {e.title}
          </TextAtom>
        </Link>
      ))}
    </div>
  );
};

export default AdminMenu;
